<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- 绿色的头部 -->
      <!-- 当设计图是640px宽的，认为以iphone4为设计模型的 -->
      <!-- 从设计图量出来的尺寸都要除以dpr2 -->
      <div class="header">
        <div class="hot">热点</div>
        <div class="sub">关注</div>
      </div>

      <ul class="nav">
        <li class="active">足球现场</li>
        <li>足球生活</li>
        <li>足球美女</li>
      </ul>

      <div class="list">
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
        <div class="list_item">
          <div class="img_wrap">
            <img src="./images/img1.png" alt="" />
          </div>
          <div class="list_des">小丸子啊小丸子</div>
        </div>
      </div>
    </div>

    <script>
      // console.log可以将内容输出到浏览器的控制台
      // console.log(123);

      // document.body.clientWidth表示设备的宽度
      // console.log(document.body.clientWidth);

      // const fontSize = (50 * document.body.clientWidth) / 320;
      // console.log(fontSize);
      document.documentElement.style.fontSize =
        (50 * document.body.clientWidth) / 320 + "px";

      /*
        1. 安装Live Server插件
        2. 拔掉网线
        3. 电脑连接手机wifi
        4. 用Live Server打开页面
        5. 用局域网的ip(终端上面输入ipconfig)替换127.0.0.1
        6. 在手机的浏览器上输入完整的地址

      */
    </script>
  </body>
</html>
